<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>玩家登录</title>
    
    <link rel="stylesheet" href="./css/common1.css">
    <link rel="stylesheet" href="./css/pop.css">
</head>
<body>
<div class="login-container">
    <h2 class="login-title">玩家登录</h2>
    <form id="loginForm">
        <div class="form-item">
            <div class="input-group">
                <span class="input-prefix">👤</span>
                <input type="text" class="input-field" placeholder="输入用户名" id="username">
                <span class="input-clear" id="clearUsername">×</span>
            </div>
        </div>
        <div class="form-item">
            <div class="input-group">
                <span class="input-prefix">🔒</span>
                <input type="password" class="input-field" placeholder="输入密码" id="password">
                <span class="password-toggle" id="togglePassword">🙈</span>
<!--                <span class="input-clear" id="clearPassword">×</span>-->
            </div>
        </div>
        <button type="button" class="el-button--primary" id="submit">登 录</button>
    </form>
    <div class="login-footer">
<!--        <span>忘记密码?</span>-->
        <span style="margin-left: 10px;">还没有账号?</span>
        <a href="register.html">立即注册</a>
    </div>

    <!-- 消息容器 -->
    <div class="toast-container"></div>
</div>

<div class="message" id="message"></div>
<script src="./js/jquery-3.7.1.js"></script>
<script src="./js/common1.js"></script>
<script src="./js/pop.js"></script>
<script>
    
    // 登录按钮点击事件
    let usernameInput = document.querySelector('#username');
    let passwordInput = document.querySelector('#password');
    let submitButton = document.querySelector('#submit');
    submitButton.onclick = function() {
        $.ajax({
            type: 'post',
            url: '/login',
            data: {
                username: usernameInput.value,
                password: passwordInput.value,
            },
            success: function(body) {
                // 请求执行成功之后的回调函数
                // 判定当前是否登录成功~
                // 如果登录成功, 服务器会返回当前的 User 对象.
                // 如果登录失败, 服务器会返回一个空的 User 对象.
                if (body && body.userId > 0) {
                    window.toast = showToast('登陆成功 即将跳转', 'success');
                    // 延迟重定向，确保消息能够完整显示
                    setTimeout(function () {
                        location.assign('/game_hall.html');
                    }, 1200);
                } else {
                    window.toast = showToast('登录失败', 'error');
                }
            },
            error: function() {
                window.toast = showToast('登录失败', 'error');
            }
        });
    };

        window.onload = () => {
            showToast('欢迎访问五子棋联机对战');
            setTimeout(() => {
                showToast('🚀 By Andu @ 2025 🔥','Andu');
            }, 1500);
        };

</script>

</body>
</html>